<template>
  <el-button class="mb20" @click="add" type="primary">新增</el-button>

  <el-table class="mb20" :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="分类" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="edit({ row: scope.row, index: scope.$index })"
        >
          编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="removeModal({ row: scope.row, index: scope.$index })"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="modalState" name="标题">
    <el-form :model="form" ref="rule" :rules="rules">
      <el-form-item label="分类" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="modalState = false">取消</el-button>
        <el-button type="primary" @click="submit('rule')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  data() {
    return {
      keyword: "",
      selectData: null,
      formLabelWidth: "120rpx",
      form: {
        name: "",
      },
      tableData: [],
      counts: 0,
      rules: {
        name: [
          {
            required: true,
            message: "请填写名称",
            trigger: "blur",
          },
        ],
      },
      pid: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http.post("/index.php/index/Hdapi/videofllist").then((data) => {
        this.tableData = data;
      });
    },
    submit(ref) {
      this.doRules(this.$refs[ref]).then(() => {
        if (this.id) this.form.id = this.id;

        this.$http
          .post(
            this.id
              ? "/index.php/index/Hdapi/videofledit"
              : "/index.php/index/Hdapi/videofladd",
            this.form
          )
          .then((data) => {
            console.log(data);
            this.modalState = false;
            ElMessage({
              message: this.id ? "编辑成功" : "新增成功",
              type: "success",
            });
            this.getData();
          });
      });
    },
    remove(data) {
      this.$http
        .post("/index.php/index/Hdapi/videofldel", {
          id: data.row.id,
        })
        .then((data) => {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
    },
    handleAvatarSuccess(file) {
      this.form.image = file.data;
    },
  },
};
</script>
